.<template>
  <div class="wrapper">
    <!-- 左侧导航 -->
    <div class="left" ref="left">
      <!-- 侧边栏部分 -->
      <van-sidebar v-model="activeKey" class="goods-left">
        <van-sidebar-item
          :title="goods.name"
          v-for="(goods, index) in goods"
          :key="index"
          :class="{ current: currentIndex == index }"
          @click="selectItem(index, $event)"
          class="left-item"
        />
        <div></div>
      </van-sidebar>
    </div>
    <!-- 右侧内容 -->
    <div class="right" ref="right">
      <ul>
        <!-- 外层循环标题 -->
        <li v-for="(item, index) in goods" :key="index" class="right-item">
          <div class="top">
            <div class="title">
              {{ item.name }}
            </div>
            <ul>
              <!-- 内层循环内容 -->
              <li v-for="(good, index) in item.foods" :key="index">
                <div class="mid">
                  <div class="left">
                    <img :src="good.icon" alt="" />
                  </div>
                  <div class="right">
                    <span class="right-title">{{ good.name }}</span>
                    <div class="xianzhou">
                      <span>{{ good.description }}</span>
                    </div>
                    <div class="shop">
                      <span>月售{{ good.sellCount }}份</span>
                      <span>好评率{{ good.rating }}%</span>
                    </div>
                    <div class="price">
                      <span>￥24000</span>
                      <span>￥28</span>
                    </div>
                  </div>
                </div>
                <!-- 添加和删除按钮 -->
                <div class="btns">
                  <div class="delbtn">
                    <svg
                      @click="addbtn(good, 1)"
                      v-show="good.count >= 1"
                      t="1622535874477"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="5746"
                      width="26"
                      height="26"
                    >
                      <path
                        d="M512 928c-229.4 0-416-186.6-416-416S282.6 96 512 96s416 186.6 416 416-186.6 416-416 416z m0-768c-194 0-352 158-352 352s158 352 352 352 352-158 352-352S706 160 512 160z"
                        p-id="5747"
                        fill="#1296db"
                      ></path>
                      <path
                        d="M672 544H352c-17.6 0-32-14.4-32-32s14.4-32 32-32h320c17.6 0 32 14.4 32 32s-14.4 32-32 32z"
                        p-id="5748"
                        fill="#1296db"
                      ></path>
                    </svg>
                  </div>
                  <span v-if="good.count">{{ good.count }}</span>
                  <div class="addbtn">
                    <svg
                      @click="addbtn(good, 0)"
                      t="1622535643005"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="5266"
                      width="26"
                      height="26"
                    >
                      <path
                        d="M512 928c-229.4 0-416-186.6-416-416S282.6 96 512 96s416 186.6 416 416-186.6 416-416 416z m0-768c-194 0-352 158-352 352s158 352 352 352 352-158 352-352S706 160 512 160z"
                        p-id="5267"
                        fill="#1296db"
                      ></path>
                      <path
                        d="M512 704c-17.6 0-32-14.4-32-32v-128h-128c-17.6 0-32-14.4-32-32s14.4-32 32-32h128v-128c0-17.6 14.4-32 32-32s32 14.4 32 32v128h128c17.6 0 32 14.4 32 32s-14.4 32-32 32h-128v128c0 17.6-14.4 32-32 32z"
                        p-id="5268"
                        fill="#1296db"
                      ></path>
                    </svg>
                  </div>
                </div>
                <!-- 下划线 -->
                <div class="wire"></div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <seelfoot
      @click="clearbtn"
      class="cartWrap"
      :selectedFoods="selectedFoods"
    ></seelfoot>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { Sidebar, SidebarItem } from "vant";
import { mapState, mapGetters } from "vuex";
import foot from "../../components/foot";
export default {
  name: "goods",
  data() {
    return {
      listHeight: [],
      scrollY: 0, //实时获取当前y轴的高度
      clickEvent: false,
      active: 1,
      activeKey: 0,
    };
  },
  components: {
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    seelfoot: foot,
  },
  methods: {
    addbtn(food, v) {
      this.$store.commit("getshop", { food, v });
      console.log(1111);
    },
    select_li(index) {
      this.selectLi = index;
    },
    _initScroll() {
      //better-scroll的实现原理是监听了touchStart,touchend事件，所以阻止了默认的事件（preventDefault）
      //所以在这里做点击的话，需要在初始化的时候传递属性click,派发一个点击事件
      //在pc网页浏览模式下，点击事件是不会阻止的，所以可能会出现2次事件，所以为了避免2次，可以在绑定事件的时候把$event传递过去
      this.lefts = new BScroll(this.$refs.left, {
        click: true,
        probeType: 3,
        // mouseWheel: true
      });
      this.rights = new BScroll(this.$refs.right, {
        probeType: 3, //探针的效果，实时获取滚动高度
        // mouseWheel: true
        click: false,
        preventDefault: false,
        tap: true,
      });
      //rights这个对象监听事件，实时获取位置pos.y
      this.rights.on("scroll", (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));
      });
    },
    _getHeight() {
      let rightItems = this.$refs.right.getElementsByClassName("right-item");
      console.log(rightItems);
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < rightItems.length; i++) {
        let item = rightItems[i];
        height += item.clientHeight;
        this.listHeight.push(height);
      }
      console.log(this.listHeight);
      console.log(height);
    },
    selectItem(index, event) {
      this.clickEvent = true;
      //在better-scroll的派发事件的event和普通浏览器的点击事件event有个属性区别_constructed
      //浏览器原生点击事件没有_constructed所以当时浏览器监听到该属性的时候return掉
      // if (!event._constructed) {
      //   return;
      // } else {
      let rightItems = this.$refs.right.getElementsByClassName("right-item");
      // let el = rightItems[index];
      // this.rights.scrollToElement(el, 300);
      this.rights.scrollToElement(rightItems[index], 300);
      // }
    },
    //清除购物车的方法
    clearbtn() {
      console.log(1111)
      this.$store.commit("clearbtn");
    },
  },
  created() {
    this.$nextTick(() => {
      this._initScroll();
      this._getHeight();
    });
  },
  mounted() {
    // this.$nextTick(() => {
    //   this._initScroll();
    //   this._getHeight();
    // });
  },
  computed: {
    selectedFoods() {
      let arr = [];
      this.goods.forEach((v) => {
        v.foods.forEach((food) => {
          if (food.count && food.count > 0) {
            arr.push(food);
          }
        });
      });
      return arr;
    },
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        let height = this.listHeight[i];
        let height2 = this.listHeight[i + 1];
        //当height2不存在的时候，或者落在height和height2之间的时候，直接返回当前索引
        //>=height，是因为一开始this.scrollY=0,height=0
        if (!height2 || (this.scrollY >= height && this.scrollY < height2)) {
          return i;
        }
        if (
          this.listHeight[this.listHeight.length - 1] -
            this.$refs.right.clientHeight <=
          this.scrollY
        ) {
          if (this.clickTrue) {
            return this.currentNum;
          } else {
            return this.listHeight.length - 1;
          }
        }
      }
      //如果this.listHeight没有的话，就返回0
      return 0;
    },
    ...mapState(["goods"]),
  },
  watch: {
    handler() {},
  },
};
</script>

<style lang="less">
.wrapper {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 348px;
  // background: pink;
  a.van-sidebar-item--select {
    background-color: pink;
    color: rgb(240, 20, 20);
  }

  .left {
    // background-color: #ffcc99;
    float: left;
    width: 160px;
    height: 100%;
    .van-sidebar {
      width: 160px;
      float: left;
      width: 100%;
      overflow-y: hidden;
      height: 100%;
    }
    .van-sidebar-item {
      // padding-left: 24px;
      // padding-top: 40px;
      // height: 108px;
      font-size: 24px;
      font-weight: 200;
      line-height: 28px;

      &::before {
        display: none;
      }
    }
    .goods-left {
      text-align: center;
      line-height: 100px;
      // padding-left: 20px;
      padding-right: 20px;
      .left-item {
        display: block;
        width: 160px;
        // height: 108px;
        height: 1.25rem;
      }
      div {
        border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      }
    }

    // border-right: 1px solid #ccc;
  }
  .right {
    height: 100%;
    overflow: hidden;
    flex: 1;
    .top {
      .title {
        display: flex;
        font-size: 24px;
        color: rgb(147, 153, 159);
        line-height: 52px;
        height: 52px;
        padding-left: 28px;
        background-color: #f3f5f7;
        border-left: 5px solid #d9dde1;
        // overflow: hidden;
      }
    }

    .mid {
      // border-bottom: solid 1px rgb(7, 17, 27);
      padding-left: 28px;
      padding-top: 36px;
      .left {
        padding-left: 36px;
        width: 128px;
        height: 128px;
        padding-right: 20px;

        img {
          width: 128px;
          height: 128px;
        }
      }
      .right {
        padding-left: 20px;
        .right-title {
          padding-top: 4px;
          font-size: 28px;
          color: rgb(7, 17, 27);
          line-height: 28px;
        }
        .xianzhou {
          padding-top: 16px;
          padding-bottom: 16px;
          span {
            font-size: 20px;
            color: rgb(147, 153, 159);
            line-height: 20px;
          }
        }
        .shop {
          span {
            font-size: 20px;
            color: rgb(147, 153, 159);
            line-height: 20px;
            &:first-child {
              padding-right: 24px;
            }
          }
        }
        .price {
          font-size: 20px;
          color: rgb(147, 153, 159);
          font-weight: normal;
          line-height: 48px;
          span:first-child {
            color: red;
          }
        }
      }
    }
    .btns {
      display: flex;
      justify-content: flex-end;
      span {
        font-size: 20px;
        color: rgb(147, 153, 159);
        line-height: 48px;
        padding-left: 24px;
        padding-right: 24px;
      }
      .addbtn {
        // padding-left: 48px;
        padding-right: 20px;
      }
    }
    .wire {
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      padding-top: 36px;
    }
  }
  .cartWrap {
    height: 46px;
  }
}
</style>